import { appThemeColors } from './appThemeColors';
import { appThemeDropShadow } from './appThemeDropShadow';
import { interFont, materialIconsFont, robotoFont } from './appThemeFont';
import { appThemeRadius } from './appThemeRadius';

export const primitives = {
  typography: {
    monoFont: robotoFont.style.fontFamily,
    textFont: interFont.style.fontFamily,
    iconFont: materialIconsFont.style.fontFamily,
  },
};

export const appTheme = {
  text: {
    mono: {
      snippet: {
        fontFamily: primitives.typography.monoFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
    },
    regular: {
      largeTitle: {
        fontFamily: primitives.typography.textFont,
        fontSize: '40px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '56px',
        letterSpacing: '-0.88px',
      },
      title1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '30px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '40px',
        letterSpacing: '-0.63px',
      },
      title2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '24px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '32px',
        letterSpacing: '-0.456px',
      },
      title3: {
        fontFamily: primitives.typography.textFont,
        fontSize: '20px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '32px',
        letterSpacing: '-0.34px',
      },
      headline: {
        fontFamily: primitives.typography.textFont,
        fontSize: '18px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '24px',
        letterSpacing: '-0.252px',
      },
      body: {
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      callout: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      subheadline: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '15px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '24px',
        letterSpacing: '-0.135px',
      },
      footnote: {
        fontFamily: primitives.typography.textFont,
        fontSize: '12px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '16px',
        letterSpacing: '0.06px',
      },
      caption1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '10px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '16px',
        letterSpacing: '0.1px',
      },
      caption2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '9px',
        fontStyle: ' normal',
        fontWeight: 400,
        lineHeight: '16px',
        letterSpacing: '0.144px',
      },
    },
    medium: {
      largeTitle: {
        fontFamily: primitives.typography.textFont,
        fontSize: '40px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '56px',
        letterSpacing: '-0.88px',
      },
      title1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '30px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '40px',
        letterSpacing: '-0.63px',
      },
      title2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '24px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '32px',
        letterSpacing: '-0.456px',
      },
      title3: {
        fontFamily: primitives.typography.textFont,
        fontSize: '20px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '32px',
        letterSpacing: '-0.34px',
      },
      headline: {
        fontFamily: primitives.typography.textFont,
        fontSize: '18px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '24px',
        letterSpacing: '-0.252px',
      },
      body: {
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      callout: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      subheadline: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '15px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '24px',
        letterSpacing: '-0.135px',
      },
      footnote: {
        fontFamily: primitives.typography.textFont,
        fontSize: '12px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '16px',
        letterSpacing: '0.06px',
      },
      caption1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '10px',
        fontStyle: 'normal',
        fontWeight: 500,
        lineHeight: '16px',
        letterSpacing: '0.1px',
      },
      caption2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '9px',
        fontStyle: ' normal',
        fontWeight: 500,
        lineHeight: '16px',
        letterSpacing: '0.144px',
      },
    },
    semiBold: {
      largeTitle: {
        fontFamily: primitives.typography.textFont,
        fontSize: '40px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '56px',
        letterSpacing: '-0.88px',
      },
      title1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '30px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '40px',
        letterSpacing: '-0.63px',
      },
      title2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '24px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '32px',
        letterSpacing: '-0.456px',
      },
      title3: {
        fontFamily: primitives.typography.textFont,
        fontSize: '20px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '32px',
        letterSpacing: '-0.34px',
      },
      headline: {
        fontFamily: primitives.typography.textFont,
        fontSize: '18px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '24px',
        letterSpacing: '-0.252px',
      },
      body: {
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      callout: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '16px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '24px',
        letterSpacing: '-0.176px',
      },
      subheadline: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        fontFamily: primitives.typography.textFont,
        fontSize: '15px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '24px',
        letterSpacing: '-0.135px',
      },
      footnote: {
        fontFamily: primitives.typography.textFont,
        fontSize: '12px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '16px',
        letterSpacing: '0.06px',
      },
      caption1: {
        fontFamily: primitives.typography.textFont,
        fontSize: '10px',
        fontStyle: 'normal',
        fontWeight: 600,
        lineHeight: '16px',
        letterSpacing: '0.1px',
      },
      caption2: {
        fontFamily: primitives.typography.textFont,
        fontSize: '9px',
        fontStyle: ' normal',
        fontWeight: 600,
        lineHeight: '16px',
        letterSpacing: '0.144px',
      },
    },
  },
  spacing: {
    xxSmall: '2px',
    xSmall: '4px',
    small: '6px',
    medium: '8px',
    large: '12px',
    xLarge: '16px',
    xxLarge: '24px',
    '3xLarge': '32px',
    '4xLarge': '40px',
    '5xLarge': '48px',
    '6xLarge': '64px',
  },
  radius: appThemeRadius,
  size: {
    xxSmall: '120px',
    xSmall: '160px',
    small: '200px',
    medium: '240px',
    large: '320px',
    xLarge: '400px',
    xxLarge: '480px',
  },
  dropShadow: appThemeDropShadow,
  innerShadow: {
    small: {
      boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.12) inset',
    },
    medium: {
      boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.12) inset',
    },
    fromAbove: {
      boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.12) inset',
    },
  },
  backgroundBlur: {
    small: {
      backdropFilter: 'blur(2px)',
    },
    normal: {
      backdropFilter: 'blur(4px)',
    },
    medium: {
      backdropFilter: 'blur(6px)',
    },
    large: {
      backdropFilter: 'blur(8px)',
    },
    xLarge: {
      backdropFilter: 'blur(12px)',
    },
    xxLarge: {
      backdropFilter: 'blur(20px)',
    },
    '3xLarge': {
      backdropFilter: 'blur(32px)',
    },
  },
  colors: appThemeColors,
} as const;

export type AppTheme = typeof appTheme;
